/*******************
结果查看
* */
<template>
  <basic-container style="overflow: auto;padding-bottom: 50px;"  >
    <el-row v-if="!isFillIn">
      <el-row style="margin:25px 0 0 0 ;">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="考核名称">
                <el-input v-model="searchForm.name" placeholder="考核名称" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <selectSearch @getDataByPerid="getDataByPerid"></selectSearch>
              </el-form-item>
              <el-form-item label="状态">
                <el-select

                  v-model="searchForm.confirmState"
                  placeholder="请选择状态"
                  class="xiaLa"
                  style="width: 100%"
                  :clearable="true"
                  @change="selectBlur"
                >
                  <el-option
                    v-for="(item, index) in stateList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-row>
      <el-row  style="height: 50px; border-bottom: 1px solid #b0bde2">
        <div class="pull-right">
          <el-button plain type="primary" @click="qzConfirm" v-if="permissions.routine_assess_confirm_all">强制确认</el-button>
        </div>
      </el-row>
      <div style="margin:20px 0 0 0 ">
        <span>指标考核&nbsp;&nbsp;</span>
        <el-radio-group v-model="choosePerOrDept" @change="choosePerOrDeptChange">
          <el-radio :label="0">人员</el-radio>
          <el-radio :label="1">机构</el-radio>
        </el-radio-group>
      </div>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号"  :index="indexMethod" align="center" width="55"></el-table-column>
          <el-table-column prop="assessUserName" align="center" label="员工编号" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessRealName" align="center" label="姓名" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip v-if="!choosePerOrDept"></el-table-column>
          <el-table-column prop="assessDeptName" align="center" label="部门" show-overflow-tooltip v-else></el-table-column>
          <el-table-column prop="name" align="center" label="考核名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="period" align="center" label="考核周期" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sumScore" align="center" label="总得分" show-overflow-tooltip></el-table-column>

          <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.appealState | transState}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" fixed="right" width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                plain
                @click="dataView(scope.row)"
              >查 看</el-button>

             <!-- <el-button
                v-if="scope.row.state==10"
                type="primary"
                size="small"
                @click="confirmIndex(scope.row)"
              >确 认</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageData.pageSize"
            :total="pageData.totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </el-row>
    <el-row v-if="isFillIn" style="padding: 0 20px; background: #FBFBFD;" v-loading="fullscreenLoading">
      <el-row style="border-bottom: 1px solid rgb(176, 189, 226);" >
        <detailHeaderEcharts v-if="showHeader" :formData="formData" :detailDataList="detailDataList" :choosePerOrDept="choosePerOrDept"></detailHeaderEcharts>
      </el-row>
      <el-row>
        <el-table
          style="width: 100%;margin-top:20px"
          :data="detailDataList"
          border
          stripe
          header-align="center"
          v-loading="dataListLoading"
          @selection-change="handleSelectionChange"
        ><!-- :summary-method="getSummaries" show-summary-->
          <el-table-column type="index"  align="center" label="序号" width="55" ></el-table-column>
          <el-table-column prop="normType" align="center" label="指标分类" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normName" align="center" label="指标名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="normRule" align="center" label="指标规则" show-overflow-tooltip></el-table-column>
          <el-table-column prop="weight" align="center" label="权重" show-overflow-tooltip></el-table-column>
          <el-table-column prop="formula" align="center" label="计算公式" show-overflow-tooltip></el-table-column>
          <el-table-column prop="targetValue" align="center" label="目标值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" align="center" label="单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finishValue" align="center" label="填报值" show-overflow-tooltip></el-table-column>
          <el-table-column prop="score" align="center" label="得分" show-overflow-tooltip></el-table-column>
          <el-table-column prop="finalScore" align="center" label="评审得分" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="provideRealName"
            align="center"
            label="数据提供部门/人"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <el-row >
          <el-form :model="formData"  ref="appealFormRef" label-width="90px" class="sslyandanswer">
            <el-form-item label="申诉理由:" v-if="formData.reason==null||formData.reason==''?false:true">
              <span>{{formData.reason?formData.reason:''}}</span>
            </el-form-item>
            <el-form-item label="申诉答复:" prop="answer"  v-if="formData.answer==null||formData.answer==''?false:true">
              <span>{{formData.answer?formData.answer:''}}</span>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row style="margin:10px;text-align:right">
<!--          <el-button @click="handleAppeal" type="primary">申 诉</el-button>-->
          <el-button type="primary" @click="goBack">返回</el-button>
        </el-row>
      </el-row>
    </el-row>

<!--    <div id="chartColumn" style="width: 100%; height: 400px;">-->
<!--    </div>-->

  </basic-container>
</template>

<script>
import targetExaminHead from "@/views/dailyExamine/components/targetExaminHead"; //状态头
import {
  resultExaminList,
  resultExaminDetail,
  addAppeal,
  resultConfirmAll
} from "@/api/dailyExamine/targetExamine/InitiateFilling";
import { examineList } from "@/api/dailyExamine/targetExamine/createAssessment"; //接口api
import selectSearch from "@/views/dailyExamine/components/select-search.vue"; //流程组件
import detailHeaderEcharts from "@/views/dailyExamine/components/detail-header-echarts"; //详情头部
import { mapGetters, mapState } from "vuex";
import store from "@/store";
export default {
  data() {
    return {
      headers: {
          Authorization: "Bearer " + store.getters.access_token
      },
      choosePerOrDept: 0,
      detailDataList: [], //查看页面的数组
      appealForm: {}, //申诉表单对象
      appealVis: false, //申诉弹窗
      isFillIn: false, //是否查看
      searchheight: "0", //搜索组件的高度
      searchadvanced: true, //搜索的显隐
      searchForm: {}, //搜索对象
      dataListLoading: false, //表格是否加载
      dataList: [], //表格数组
      formData:{},
      multipleSelection: [], //勾选数据
      pageData: {
        //分页对象
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      },
      assessParticipantId: null, //后台需要的考核id
      showHeader:false,
      stateList:[
          { name: "未确认", value: "0,1,2,3,4" },
          { name: "已确认", value: "5,15,25,35,45" },
      ],
      showHeader:false,
      fullscreenLoading:false
    };
  },
  mounted() {
     // this.drawLine();
  },
  computed: {
      ...mapGetters(["permissions"])
  },
  filters: {
      transState(val) {
          switch (val) {
              case 0:
                  return "待确认";
                  break;
              case 1:
                  return "申诉中";
                  break;
              case 2:
                  return "申诉通过";
                  break;
              case 3:
                  return "申诉被驳回";
                  break;
              case 4:
                  return "已作废";
                  break;
              case 5:
                  return "已确认";
                  break;
              case 15:
                  return "已确认";
                  break;
              case 25:
                  return "已确认";
                  break;
              case 35:
                  return "已确认";
                  break;
              case 45:
                  return "已确认";
                  break;
              default:
                  break;
          }
          // 0待确认
          // 1申诉中
          // 2申诉通过
          // 3申诉被驳回
          // 4已作废
          // 5已确认
          // 25 申诉通过,已确认
          // 35 申诉被驳回,已确认
          // 45 作废,已确认
          //
          // 0 显示 确认
          // 1 隐藏 确认
          // 2 显示 确认
          // 3 显示 确认
          // 4 显示 确认
          // 5 隐藏 确认
          //
          // ssFlag   0 隐藏申诉   1显示申诉
      }
  },
  components: {
    targetExaminHead, //状态头
    selectSearch,
    detailHeaderEcharts
  },
  created() {
    this.getDataList();
  },
  methods: {
    qzConfirm(){

        if (this.multipleSelection.length == 0) {
            this.$message.warning("请先选择要确认的数据");
        } else {
            let stateFlag = this.multipleSelection.some(it => {
                return it.state == 11;
            });
            if(stateFlag){
                this.$message.error('选取数据已有已确认数据，请重新选择数据');
                return ;
            }
            let ids = this.multipleSelection.map(it => {
                return it.id;
            });
            resultConfirmAll(ids.toString())
                .then(r => {
                        if (r.data.code == 0) {
                            this.$message.success("确认成功");
                            this.getDataList();
                        } else {
                            this.$message.error(r.data.msg);
                            that.getDataList();
                        }
                })
                .catch(err => {});
        }
    },
    choosePerOrDeptChange() {
      this.pageData.pageIndex = 1 ;
      this.getDataList();
    },
    // 确认
    confirmIndex(row) {},
    // 提交申诉
    submitAppeal() {
      addAppeal(this.assessParticipantId, this.appealForm.reason)
        .then(r => {
          if (r.data.code == 0) {
            this.$message.success("申述成功,等待处理");
            this.appealVis = false;
          } else {
            this.$message.error(r.data.msg);
            this.appealVis = false;
          }
        })
        .catch(err => {});
    },
    // 点击申诉出弹窗
    handleAppeal() {
      this.appealVis = true;
      this.appealForm.user = null;
    },
    // 返回
    goBack() {
      this.isFillIn = false;
    },
    //   查看
    dataView(data) {
      this.isFillIn = true;
      this.assessParticipantId = data.id;
      this.fullscreenLoading = true ;
      resultExaminDetail(data.id)
        .then(r => {
          if (r.data.code == 0) {
            this.detailDataList = r.data.data;
            this.formData = r.data.data[0] ;
            this.showHeader = true ;
              this.fullscreenLoading = false ;
          }
        })
        .catch(err => {});
    },
    // 查询条件的展开关闭
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 查询列表
    getDataList() {
       this.dataListLoading = true ;
      examineList(
        Object.assign(
          {
            current: this.pageData.pageIndex,
            size: this.pageData.pageSize,
            type: this.choosePerOrDept
          },
          this.searchForm
        ),
        9
      )
        .then(r => {
          if (r.data.code == 0) {
            this.dataList = r.data.data.records;
            this.pageData.totalPage = r.data.data.total;
              this.dataListLoading = false ;
          }
        })
        .catch(err => {});
    },
    // 勾选数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 条数变化
    sizeChangeHandle(val) {
      this.pageData.pageIndex = 1;
      this.pageData.pageSize = val;
      this.getDataList();
    },
    // 页码分页变化
    currentChangeHandle(val) {
      this.pageData.pageIndex = val;
      this.getDataList();
    },
    //table表索引
    indexMethod(index) {
        return (this.pageData.pageIndex-1)*this.pageData.pageSize+index+1;
    },
      getSummaries(param) {
          //此处打印param可以看到有两项，一项是columns，一项是data，最后一列可以通过columns.length获取到。
          const { columns, data } = param
          const len = columns.length
          const sums = []
          columns.forEach((column, index) => {
              //如果是第一列，则最后一行展示为“总计”两个字
              if (index === 0) {
                  sums[index] = '总计'
                  //如果是最后一列，索引为列数-1，则显示计算总和
              } else if (index === len - 2 ) {
                  sums[index] =  this.formData.sumScore ;
              } else {
                  sums[index] = ''
              }
          })
          return sums
      },
      //选择周期执行搜索功能
      getDataByPerid(period){
          this.searchForm.period = period ;
          this.getDataList() ;
      },
      goBack() {
          this.isFillIn=false ;
          this.detailDataList = [] ;
          this.formData = {} ;
          this.showHeader = false ;
      }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-select .el-select__tags {
  overflow: auto !important;
  //   min-height: 200px !important;
}
::v-deep.el-tag.el-tag--info {
  margin: 5px;
  border: 1px solid green;
}

/deep/.el-form-item--small.el-form-item{margin-bottom: 0!important; margin-top: 20px;}

.detailinfo .el-form-item--small.el-form-item{margin-top: 0px!important;}
/deep/.sslyandanswer .el-form-item__content{  margin-left: 90px!important;padding: 0 15px!important;min-height: 80px!important;border: 1px solid #ccccda!important;border-radius: 5px!important;}
/deep/.sslyandanswer .el-form-item__label,/deep/.ssly .el-form-item__label {font-weight: bold!important;}
/deep/.el-textarea__inner{background: #fff!important;}
</style>
